<template>
  <div class="list">
      <div v-for="(item,index) in cities" :key="index" @click="gotozm($event,index)" :class="zmitem===index?'active':''">{{index}}</div>
  </div>
</template>

<script>
export default {
  props: {
    cities: Object,
    
  },
  data() {
      return {
          zmitem:0
      }
  },
  methods:{
      gotozm(e,index){
          this.zmitem = index
          this.$emit('check',e.target.innerText)
          // console.log(e.target.innerText);
      }
  }
};
</script>

<style  scoped>
.list{
    width: 0.45rem;
    color: #00bcd4;
    position: fixed;
    text-align: center;
    box-sizing: border-box;
    top: 2.2rem;
    right: 0rem;
    /* padding: 0.1rem; */
}
.active{
    color: red;
}
</style>